<template>
	<view class="container">
		<view class="grid" v-for="(grid, index) in gridItems" :key="index">
			<!-- <view v-if="index==0">{{grid}}</view> -->
			<image class="grid-image" :src="grid.imgUrl" mode="aspectFill"></image>
			<view class="grid-info">
				<text class="grid-title">{{ grid.title }}</text>
				<text class="grid-address">{{ grid.address }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 假设这是一个九宫格的数据  
				gridItems: [{
						imgUrl: 'https://example.com/image1.jpg',
						title: '标题1',
						address: '地址1'
					},
					{
						imgUrl: 'https://example.com/image2.jpg',
						title: '标题2',
						address: '地址2'
					},
					// ... 添加更多项以填满九宫格  
					{
						imgUrl: 'https://example.com/image9.jpg',
						title: '标题9',
						address: '地址9'
					}
				]
			}
		},
		onLoad() {
			console.log(this.gridItems)
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
	}

	.grid {
		width: calc(33.333% - 20px);
		/* 假设我们有三个一列，所以每个格子占三分之一的宽度减去间隔 */
		margin: 10px;
		box-sizing: border-box;
		/* 根据需要添加其他样式 */
	}

	.grid-image {
		width: 100%;
		height: 150px;
		/* 根据需要设置高度 */
	}

	.grid-info {
		padding: 10px;
		background-color: #f0f0f0;
		/* 浅灰色背景，便于阅读 */
	}

	.grid-title,
	.grid-address {
		/* 标题和地址的样式 */
	}
</style>